<template>
  <wd-switch v-model="isDark" @change="changeSwitch" />
</template>

<script setup>
import { ref, computed } from 'vue'
import { useGlobalStore } from '@/store/global'
import {
  changeSafeareaColor,
  changeStatusbarColor,
  changeThemeMode
} from '@/utils/prehandle'

const globalStore = useGlobalStore()
const theme = computed({
  set(newVal) {
    globalStore.theme = newVal
  },
  get() {
    return globalStore.theme
  }
})

const isDark = ref(globalStore.theme == 'dark')
function changeSwitch(e) {
  theme.value = e.value ? 'dark' : 'light'

  changeSafeareaColor(theme.value)
  changeStatusbarColor(theme.value)
  changeThemeMode(theme.value)
}
</script>
